<script setup lang="ts">
import { reactive } from 'vue'
import pageWrapper from '@/components/page-wrapper.vue'
import formCard from '@/components/form-card.vue'

const tableColumns = [
    { title: '成员姓名', dataIndex: 'f1' },
    { title: '工号', dataIndex: 'f2' },
    { title: '所属部门', dataIndex: 'f3' },
    { title: '操作', slotName: 'oprations' }
]
const tableData = [
    { f1: 'John Brown', f2: '00001', f3: 'New York No. 1 Lake Park' },
    { f1: 'Jim Green', f2: '00002', f3: 'London No. 1 Lake Park' },
    { f1: 'Joe Black', f2: '00003', f3: 'Sidney No. 1 Lake Park' }
]

const state = reactive({
    form: {}
})
</script>

<template>
    <page-wrapper>
        <a-form :model="state.form" layout="vertical">
            <form-card title="仓库管理">
                <a-grid :cols="3" :row-gap="0" :col-gap="20">
                    <a-grid-item>
                        <a-form-item label="仓库名" field="">
                            <a-input placeholder="请输入仓库名称" />
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="仓库域名" field="">
                            <a-input placeholder="请输入">
                                <template #prepend>https://</template>
                                <template #append>.com</template>
                            </a-input>
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="仓库管理员" field="">
                            <a-select placeholder="请选择管理员">
                                <a-option>付晓晓</a-option>
                                <a-option>周毛毛</a-option>
                            </a-select>
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="审批人" field="">
                            <a-select placeholder="请选择审批人">
                                <a-option>付晓晓</a-option>
                                <a-option>周毛毛</a-option>
                            </a-select>
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="生效日期" field="">
                            <a-range-picker style="width: 100%" />
                        </a-form-item>
                    </a-grid-item>
                </a-grid>
            </form-card>
            <form-card title="任务管理">
                <a-grid :cols="3" :row-gap="0" :col-gap="20">
                    <a-grid-item>
                        <a-form-item label="任务名" field="">
                            <a-input placeholder="请输入" />
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="任务描述" field="">
                            <a-input placeholder="请输入" />
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="执行人" field="">
                            <a-select placeholder="请选择">
                                <a-option>付晓晓</a-option>
                                <a-option>周毛毛</a-option>
                            </a-select>
                        </a-form-item>
                    </a-grid-item>
                    <a-grid-item>
                        <a-form-item label="生效日期" field="">
                            <a-time-picker style="width: 100%" />
                        </a-form-item>
                    </a-grid-item>
                </a-grid>
            </form-card>
            <form-card title="成员管理">
                <a-space :size="20" direction="vertical" fill>
                    <a-table :columns="tableColumns" :data="tableData" :bordered="{ cell: true }" :pagination="false">
                        <template #oprations>
                            <a-link href="#" :hoverable="false">编辑</a-link>
                        </template>
                    </a-table>
                    <a-button type="dashed" long>
                        <template #icon>
                            <icon-plus />
                        </template>
                        添加一行数据
                    </a-button>
                </a-space>
            </form-card>
        </a-form>
        <template #footer-right>
            <a-button>重置</a-button>
            <a-button type="primary">提交</a-button>
        </template>
    </page-wrapper>
</template>
